<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>微单页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
		<!--ios是否运行创建快捷启动方式-->
		<meta content="yes" name="apple-mobile-web-app-capable">
		<!--ios顶部通知栏的样式 黑色-->
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<!--遇到数字不让转成电话号码格式-->
		<meta content="telephone=no" name="format-detection">
		<script src="js/jquery-1.7.2.min.js"></script>
		
		<script src="assets/mui/js/mui.min.js"></script>	
		<script src="js/remstyle.js"></script>
		<script src="common/js/common.js"></script>	
		<script src="js/vue.js"></script>
		<link rel="stylesheet" type="text/css" href="common/css/base.css" />
		<link rel="stylesheet" href="assets/mui/css/mui.min.css">
		<style>
			img {
				width: none !important;
			}
			
			#app {
				padding-top: 1.2rem;
			}
			
			.mycollection {
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
			
			.left {
				height: 1rem;
				width: 1rem;
				margin-right: 0.2rem;
			}
			
			.left img {
				width: 100%;
				height: 100%;
			}
			
			.right {
				width: 70%;
			}
			
			.right p {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.right p:first-child {
				font-size: 0.34rem;
			}
			
			.right p:last-child {
				font-size: 0.28rem;
			}
		</style>
	</head>

	<body>
		<div id="app">

			<header id="header" class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #CCCCCC;"></a>
				<h1 class="mui-title">文章列表</h1>
			</header>
			<div class="mui-scroll-wrapper" style="margin-top: 1rem;">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell" v-for="(item,index) in articles" :key="index">
							<div class="mui-slider-right">
								<div class="mui-btn mui-btn-red" class="mycollection-delete" @tap="deleteArticle(item.id,e)">删除</div>
							</div>
							<div class="mui-slider-handle">
								<div class="mycollection">
									<div class="left" ><img :src="item.img_url" /></div>
									<div class="right" @tap="articleTo(item.article_url)">
										<p>{{item.title}}</p>
										<p>{{item.title}}</p>
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				articles: [],
				newArticles: [],
				page: 1
			},
			created() {
				var that = this;
				that.article();
				mui.init({
					pullRefresh: {
						container: '.mui-scroll-wrapper',
						up: {
							callback: function() {
								that.page++;
								that.article();
								if(that.newArticles.length) {
									this.endPullupToRefresh();
								} else {
									this.endPullupToRefresh(true);
								}
							}
						}
					}
				});
			},
			
			methods: {
				article() {
					var that = this;
					mui.ajax(window.address + '/wechat/singlepage/getArticle', {
						data: {
							user_uuid: CD.geturl().c_user_id,
							page: that.page,
							rows: 1,
						},
						type: 'get',
						dataType: 'json',
						success: function(data) {
							that.newArticles = data.data;
							for(var i = 0; i < data.data.length; i++) {
								that.articles.unshift(data.data[i]);
							}
							console.log(data);
							console.log(that.articles)
						}
					})
				},
				articleTo(arturl) {
					mui.openWindow({
						url: arturl
					});
				},
				deleteArticle(articleId) {
					var that = this;
					mui.confirm('确定删除吗？', '提示', function(e) {
						if(e.index == 1) {
							mui.ajax(window.address + '/wechat/singlepage/deleteArticle', {
								type: 'post',
								data: {
									articleId: articleId
								},
								dataType: 'json',
								success: function(data) {
									 location=location;
									console.log(data);									
								}
							})
						}
					});
				}
			}

		})
	</script>

</html>